import { Drawer, Button } from '@alifd/next';
import { t } from '@lingui/macro';
import { observer } from 'mobx-react-lite';
import React from 'react';

// 列表
import Vehicle from '@/pages/company/Vehicle';
import Driver from '@/pages/company/Driver';
import CcOrder from '@/pages/order/CcOrder';
import ScOrder from '@/pages/order/ScOrder';
import BusOrder from '@/pages/order/BusOrder';
import RsOrder from '@/pages/order/RsOrder';
import Customer from '@/pages/Customer';

// 表单
import PartnerForm from '@/pages/distribution/Partner/components/DataForm';
import ChannelForm from '@/pages/distribution/Channel/components/ChannelForm';
import DriverForm from '@/pages/company/Driver/components/DataForm';
import CompanyForm from '@/pages/company/CompanyInfo/components/DataForm';
import ActivityForm from '@/pages/market/Activity/components/ActivityForm';
import CustomerForm from '@/pages/Customer/components/PartnerDrawer';

import DrawerFooter from '@/components/DrawerFooter';

/**
 * 侧边弹出订单列表
 * @param {*} queryParams 查询参数 {companyId: xxx}
 * @type {String} ccOrder-包车订单 scOrder-专线订单 busOrder-巴士订单 Vehicle-车辆列表 Driver-司机列表
 * @onCancel 关闭函数 setModal[];
 * @name title名称
 * @returns DOM
 */
function ComponentsDrawer({ modal, setModal, queryParams, inviteCodes, onCancel, name }) {
  const TYPE = {
    vehicle: <Vehicle queryParams={queryParams} />,
    driver: <Driver queryParams={queryParams} />,
    ccOrder: <CcOrder queryParams={queryParams} />,
    scOrder: <ScOrder queryParams={queryParams} />,
    busOrder: <BusOrder queryParams={queryParams} />,
    rsOrder: <RsOrder queryParams={queryParams} />,
    customer: <Customer inviteCodes={inviteCodes} />,
    partnerForm: <PartnerForm modal={['view']} username={queryParams?.id} />,
    channelForm: <ChannelForm modal={['view']} channelId={queryParams?.id} />,
    driverForm: <DriverForm modal={['view']} id={queryParams?.id} />,
    activityForm: <ActivityForm modal={['view']} id={queryParams?.id} />,
    companyForm: <CompanyForm modal={['view']} companyId={queryParams?.id} />,
    customerForm: <CustomerForm modal={['customerForm']} setModal={setModal} onCancel={onCancel} data={{ username: queryParams?.username }} />,
  };

  const TITLE = {
    vehicle: t`查看【${name}】车辆`,
    driver: t`查看【${name}】司机`,
    ccOrder: t`查看【${name}】包车订单`,
    scOrder: t`查看【${name}】专线订单`,
    busOrder: t`查看【${name}】巴士订单`,
    rsOrder: t`查看【${name}】拼车订单`,
    customer: t`查看客户`,
    partnerForm: t`查看【${name}】合伙人`,
    channelForm: t`查看【${name}】渠道商户`,
    driverForm: t`查看【${name}】司机`,
    companyForm: t`查看【${name}】公司`,
    activityForm: t`查看【${name}】活动`,
    customerForm: t`查看【${name}】用户`,
  };

  /**
   * 关闭modal
   */
  const handleCancel = () => {
    onCancel();
  };

  return (
    <>
      <Drawer
        visible={
          modal[0] === 'vehicle' ||
          modal[0] === 'ccOrder' ||
          modal[0] === 'scOrder' ||
          modal[0] === 'driver' ||
          modal[0] === 'busOrder' ||
          modal[0] === 'rsOrder' ||
          modal[0] === 'customer' ||
          modal[0] === 'partnerForm' ||
          modal[0] === 'channelForm' ||
          modal[0] === 'driverForm' ||
          modal[0] === 'companyForm' ||
          modal[0] === 'activityForm' ||
          modal[0] === 'customerForm'
        }
        title={TITLE[modal[0]]}
        style={{ maxWidth: '90%' }}
        closeMode={['esc', 'mask', 'close']}
        onClose={() => handleCancel()}
        width="90%"
      >
        {TYPE[modal[0]]}
        <DrawerFooter>
          <Button style={{ marginLeft: 8 }} onClick={handleCancel}>{t`取消`}</Button>
        </DrawerFooter>
      </Drawer>
    </>
  );
}

export default observer(ComponentsDrawer);
